<div class="datatable">
  <rd-widget>
    <rd-widget-body classes="no-padding">
      <div class="toolBar">
        <div class="toolBarTitle"> <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i> {{ $ctrl.titleText }} </div>
      </div>
      <div class="searchBar">
        <i class="fa fa-search searchIcon" aria-hidden="true"></i>
        <input type="text" class="searchInput" placeholder="Search..." auto-focus ng-model-options="{ debounce: 300 }" />
      </div>
      <div class="table-responsive">
        <table class="table table-hover nowrap-cells">
          <thead>
            <tr>
              <th>
                Name
              </th>
              <th>
                Description
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td class="text-muted">Endpoint administrator</td>
              <td class="text-muted">Full control of all resources in an endpoint</td>
            </tr>
            <tr>
              <td class="text-muted">Helpdesk</td>
              <td class="text-muted">Read-only access of all resources in an endpoint</td>
            </tr>
            <tr>
              <td class="text-muted">Read-only user</td>
              <td class="text-muted">Read-only access of assigned resources in an endpoint</td>
            </tr>
            <tr>
              <td class="text-muted">Standard user</td>
              <td class="text-muted">Full control of assigned resources in an endpoint</td>
            </tr>
          </tbody>
        </table>
        <div class="footer">
          <div class="paginationControls">
            <form class="form-inline">
              <span class="limitSelector">
                <span style="margin-right: 5px;">
                  Items per page
                </span>
                <select class="form-control">
                  <option value="0">All</option>
                  <option value="10">10</option>
                  <option value="25">25</option>
                  <option value="50">50</option>
                  <option value="100">100</option>
                </select>
              </span>
              <dir-pagination-controls max-size="5"></dir-pagination-controls>
            </form>
          </div>
        </div>
      </div>
    </rd-widget-body>
  </rd-widget>
</div>
